import React, { useRef, useState } from 'react'
import Card from '../../components/Card/index'
import { Switch, message, Input } from 'antd'

function About() {

    let defaultValue = 'This is a simple card.'

    const [value, setValue] = useState('')

    const inputRef = useRef(null)

    // const [values, setValues] = useState('')

    const handleChanges = (e) => {
        inputRef.current = e.target.value
        defaultValue = inputRef.current
        // console.log(inputRef.current)
        setValue(e.target.value)
    }

    const handleChange = (e) => {
        setValue(e.target.value)
    }
    const onChangeBoolean = (checked) => {
        if (checked) {
            message.success('switch to true')
        } else {
            message.error('switch to false')
        }
    }

    return (
        <div>
            <h1 className="title">About</h1>
            <div>Welcome to About!</div>
            <Card title={'龙曾在此'} subtitle={'折纸飞龙'}>
                <div>
                    <div>龙曾在此，折纸飞龙，基金会</div>
                    <Switch defaultChecked onChange={onChangeBoolean} />
                </div>
            </Card>
            <Input style={{ width: '20%', marginBottom: '20px' }} value={value} onChange={handleChange} />
            <div>{value}</div>

            <Input style={{ width: '20%', marginBottom: '20px' }} ref={inputRef} defaultValue={defaultValue} onChange={handleChanges} />
            <div>{defaultValue}</div>
            <Card title={'宇宙混沌'} subtitle={'犹格索托斯'}>
                <div>
                    <div>宇宙混沌，犹格索托斯，克苏鲁</div>
                </div>
            </Card>
        </div>
    )
}

export default About